<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>M4Q Animation - Metro 4 :: Popular HTML, CSS and JS library</title>

    <style>
        .animate-demo-cube {
            width: 30px;
            height: 30px;
            margin: 2px;
        }

        .easing-table tr td:nth-child(even) {
            width: 140px;
        }
        .js-demo-cube-container {
            padding: 10px;
            width: 120px;
            position: relative;
        }
        .js-demo-cube {
            width: 5px;
            height: 5px;
            position: relative;
            background: white;
        }
    </style>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">About</a></li>
                </ul>

            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>M4Q Animation</h1>
                <p class="text-leader">
                    Use m4q animation to animate HTMLElements.
                </p>

                <!-- ads-html -->

                <h3 id="_m4q_about">About</h3>
                <p>
                    The <code>m4q</code> contains functions for animate HTML elements. Animate function used <code>requestAnimationFrame</code> method to executing animation rules.
                </p>

                <h3>Animation</h3>
                <p>
                    To animate element, you can use <code>$.animate</code> function. Global function receive next arguments:
                </p>
                <pre><code>
                    $.animate(element, draw, duration, timing, callback);
                </code></pre>
                <ul>
                    <li><b>element</b> - HTMLElement</li>
                    <li><b>draw</b> - function or object of properties to animate</li>
                    <li><b>duration</b> - animation duration</li>
                    <li><b>timing</b> - easing function name to calculate timing</li>
                    <li><b>callback</b> - callback function for executing after animation is done</li>
                </ul>

                <h5>Draw function</h5>
                <p>
                    Using the function gives you more control over what happens during the animation. Function receive two arguments: <code>normalized timing</code> and <code>timing with apply easing</code>.
                </p>
                <p>
                    Normalized timing has value from 0 to 1. Timing with easing has value from 0 to 1 multiplied by the value of the easing function.
                </p>
                <div class="example">
                    <div class="text-center m-2">
                        <button class="button" onclick="goCube1(this)">Go</button>
                    </div>
                    <div class="animate-demo-cube bg-red" id="dc-1"></div>
                    <div class="animate-demo-cube bg-red" id="dc-2"></div>
                    <script>
                        function goCube1(btn){
                            var el = $("#dc-1, #dc-2");
                            var startPos = parseInt(el.style("left"));
                            var maxLeft = startPos === 0 ? el.parent().width() - 62 : 0;
                            var delta = maxLeft - startPos;

                            btn.disabled = true;

                            $.each(el, function(){
                                var element = this;
                                $.animate(element, function(t, p){

                                    var m = $(element).id() === 'dc-1' ? t : p;
                                    $(element).css("left", startPos + (delta * m) + "px");

                                }, 3000, "easeInOutBounce", function(){
                                    btn.disabled = false;
                                });
                            });
                        }
                    </script>
                </div>
                <pre><code>
                    var el = $("#dc-1, #dc-2");
                    var startPos = parseInt(el.style("left"));
                    var maxLeft = startPos === 0 ? el.parent().width() - 62 : 0;
                    var delta = maxLeft - startPos;

                    btn.disabled = true;

                    $.each(el, function(){
                        var element = this;
                        $.animate(element, function(t, p){

                            var m = $(element).id() === 'dc-1' ? t : p;
                            $(element).css("left", startPos + (delta * m) + "px");

                        }, 3000, "easeInOutBounce", function(){
                            btn.disabled = false;
                        });
                    });
                </code></pre>

                <h5>Draw object</h5>
                <p>
                    You can use a plane object for setup animation rules. If you use an object, you must define end value for each property, which is going to animate.
                </p>
                <div class="example">
                    <div class="text-center m-2">
                        <button class="button" onclick="goCube2(this)">Go</button>
                    </div>
                    <div class="animate-demo-cube bg-red" id="demo-cube-2"></div>
                    <script>
                        function goCube2(btn){
                            var el = $("#demo-cube-2");
                            var startPos = parseInt(el.style("left"));
                            var maxLeft = startPos === 0 ? el.parent().width() - 62 : 0;

                            btn.disabled = true;

                            $.animate(el, {
                                left: maxLeft
                            }, 3000, function(){
                                btn.disabled = false;
                            });
                        }
                    </script>
                </div>
                <pre><code>
                    var el = $("#demo-cube-2");
                    var startPos = parseInt(el.style("left"));
                    var maxLeft = startPos === 0 ? el.parent().width() - 62 : 0;

                    btn.disabled = true;

                    $.animate(el, {
                        left: maxLeft
                    }, 3000, function(){
                        btn.disabled = false;
                    });
                </code></pre>

                <h3>Animate elements set</h3>
                <p>
                    You can animate elements set. To animate elements set, you must use set animate function to animate elements set - <code>$(selector).animate(...)</code>
                </p>
                <div class="example">
                    <div class="text-center m-2">
                        <button class="button" onclick="goCube3(this)">Go</button>
                    </div>

                    <div class="animate-demo-cube bg-red c1"></div>
                    <div class="animate-demo-cube bg-red c2"></div>
                    <div class="animate-demo-cube bg-red c3"></div>

                    <script>
                        function goCube3(btn){
                            var el = $(".c1, .c2, .c3");
                            var startPos = parseInt(el.style("left"));
                            var maxLeft = startPos === 0 ? el.parent().width() - 62 : 0;

                            btn.disabled = true;

                            el.animate({
                                left: maxLeft
                            }, 3000, function(){
                                btn.disabled = false;
                            });
                        }
                    </script>
                </div>
                <pre><code>
                    var el = $(".c1, .c2, .c3");
                    var startPos = parseInt(el.style("left"));
                    var maxLeft = startPos === 0 ? el.parent().width() - 62 : 0;

                    btn.disabled = true;

                    el.animate({
                        left: maxLeft
                    }, 3000, function(){
                        btn.disabled = false;
                    });
                </code></pre>

                <h3>Stopping animation</h3>
                <p>
                    You can stop animation with special method <code>$(selector).stop([complete])</code>. The <code>complete</code> optional argument must be boolean and guarantee the end of the animation when <code>true</code>.
                </p>
                <div class="example">
                    <div class="text-center m-2">
                        <button class="button" onclick="goCube4(this)">Go</button>
                        <button class="button" onclick="$('#stop-cube-1').stop();">Stop</button>
                        <button class="button" onclick="$('#stop-cube-1').stop(true);">Stop and complete</button>
                    </div>

                    <div class="animate-demo-cube bg-red" id="stop-cube-1"></div>

                    <script>
                        function goCube4(btn){
                            var el = $("#stop-cube-1");
                            var startPos = parseInt(el.style("left"));
                            var maxLeft = startPos === 0 ? el.parent().width() - 62 : 0;

                            btn.disabled = true;

                            el.animate({
                                left: maxLeft
                            }, 3000, function(){
                                btn.disabled = false;
                            });
                        }
                    </script>
                </div>


                <h3>Easing function for timing</h3>
                <p class="text-small text-muted m-0">
                    Thanks to <span class="fg-dark">Andrew Ray</span> for <a href="https://github.com/AndrewRayCode/easing-utils">easing utils</a>
                </p>
                <p>
                    Easing can really bring life to an effect. Easing controls how an animation progresses over time by manipulating its acceleration.
                    Easing can be applied when using the <code>m4q.animate()</code> method.
                </p>
                <p>
                    The default easing function is <code>linear</code>.
                </p>

                <table class="table border bordered striped hovered easing-table">
                    <thead>
                    <tr>
                        <td>Func name</td>
                        <td>Demo</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>linear</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="linear"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeInQuad</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeInQuad"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeOutQuad</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeOutQuad"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeInOutQuad</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeInOutQuad"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeInCubic</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeInCubic"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeOutCubic</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeOutCubic"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeInOutCubic</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeInOutCubic"></div>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td>easeInQuart</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeInQuart"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeOutQuart</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeOutQuart"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeInOutQuart</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeInOutQuart"></div>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td>easeInQuint</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeInQuint"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeOutQuint</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeOutQuint"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeInOutQuint</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeInOutQuint"></div>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td>easeInSine</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeInSine"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeOutSine</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeOutSine"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeInOutSine</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeInOutSine"></div>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td>easeInExpo</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeInExpo"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeOutExpo</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeOutExpo"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeInOutExpo</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeInOutExpo"></div>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td>easeInCirc</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeInCirc"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeOutCirc</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeOutCirc"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeInOutCirc</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeInOutCirc"></div>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td>easeInElastic</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeInElastic"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeOutElastic</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeOutElastic"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeInOutElastic</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeInOutElastic"></div>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td>easeInBack</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeInBack"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeOutBack</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeOutBack"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeInOutBack</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeInOutBack"></div>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td>easeInBounce</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeInBounce"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeOutBounce</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeOutBounce"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>easeInOutBounce</td>
                        <td>
                            <div class="bg-dark js-demo-cube-container">
                                <div class="js-demo-cube bg-white" data-easing="easeInOutBounce"></div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>

            </main>
        </div>

    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <script>
        var cubes = $('.js-demo-cube');

        setInterval(function(){
            $.each(cubes, function(){
                var cube = $(this);
                var endValue = parseInt(cube.style("left")) <20 ? 120 - cube.width() - 20 : 0;
                cube.animate({
                    left: endValue
                }, 1000, cube.data('easing'));
            });
        }, 3000);
    </script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>